<template>
  <div class="did-h">
    <div class="black black-h">
      <div>首次登录修改密码</div>    
      <el-row :gutter="20" class="mt3">
        <el-col :span="10" :offset="6">
          <el-form label-position="right" label-width="80px" ref="formRef">
            <el-form-item label="旧密码">
              <el-input v-model="form.oldPassword" placeholder="请输入旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码">
              <el-input v-model="form.newPassword" placeholder="请输入您想修改的密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="form.confirmPassword" placeholder="请再次输入新的密码"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="did-button">
        <el-button size="medium" type="primary" @click="submitForm">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: '',
      },
      data: {
        msg: '',
        data: null
      }
    };
  },
  methods: {
    submitForm() {
      this.data = {
        msg: '',
        data: null
      };

      if (this.form.newPassword !== this.form.confirmPassword) {
        this.data = {
          msg: 'Error',
          data: false
        };
        return;
      }

      const formData = new FormData();
      formData.append('oldPassword', this.form.oldPassword);
      formData.append('newPassword', this.form.newPassword);
      formData.append('confirmPassword', this.form.confirmPassword);

      this.$http.post('http://localhost:8081/kyc/update', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
        .then(response => {
          this.data = response.body;
        })
        .catch(error => {
          console.error(error);
          this.data = {
            msg: 'Error',
            data: false
          };
        });
    }
  },
};
</script>

<style scoped>
.did-h {
  margin-top: 0%;
}

.black-h {
  height: 50%;
}

.black-height {
  height: calc(50% - 90px);
}

.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}

.text-c {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
</style>
